<template>
	<view>
    <!-- 
     默认组件宽度100%，高度66rpx ， 可通过boxStyle设置
     默认底部线宽度为内容宽度一半，高度为8rpx ， 可通过lineStyle设置
     默认选中
     -->
    
    <!-- 普通用法 -->
    <vf-navbar :navs="navs" :current="current" @click="changeCurrent"></vf-navbar>
    <view class="line"></view>
    
    <!-- 填充模式 -->
    <vf-navbar :navs="navs2" :current="current" @click="changeCurrent" fill></vf-navbar>
    <view class="line"></view>
    
    <!-- 填充模式，并设置下划线样式 -->
    <vf-navbar :navs="navs2" :current="current" @click="changeCurrent" fill lineStyle="width: 30rpx;height: 10rpx;"></vf-navbar>
    <view class="line"></view>
    
    <!-- 自定义默认样式及选中样式 -->
    <vf-navbar :navs="navs" :current="current" @click="changeCurrent" :itemPadding="30" activeStyle="font-size: 32rpx;" itemStyle="color: #333;"></vf-navbar>
    <view class="line"></view>
    
    <!-- 定义样式及大小居中 -->
    <vf-navbar :navs="navs3" :current="current" @click="changeCurrent" :itemPadding="30" activeStyle="font-size: 36rpx;" itemStyle="color: #333;" lineStyle="width: 30rpx;height: 10rpx;bottom: 0rpx;" boxStyle="width: 300rpx;margin: 0 auto;" fill></vf-navbar>
    
    <!-- 设置高度，并使用填充模式 -->
    <vf-navbar :navs="navs" :current="current" @click="changeCurrent" boxStyle="height: 88rpx;" fill></vf-navbar>
    <view class="line"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        current: 0,
				navs: [
          { id: 1, name: '热门推荐' },
          { id: 2, name: '数码产品' },
          { id: 3, name: '衣服' },
          { id: 4, name: '鞋' },
        ],
        navs2: [
          { id: 1, name: '我的关注' },
          { id: 2, name: '我的收藏' },
        ],
        navs3: [
          { id: 1, name: '推荐' },
          { id: 2, name: '关注' }
        ]
			};
		},
    
    methods: {
      
      changeCurrent(e) {
        this.current = e;
      }
    }
	}
</script>

<style lang="scss" scoped>
.line {
  width: 100%;
  height: 1px;
  background-color: #f3f3f3;
  margin: 10rpx 0;
}


</style>
